<template>
    <div id="userCreate">
        <BackHeader :header="Header"></BackHeader>
        <div class="travel1">
            <img src="../../assets/img/7.png">
        </div>   
        <div class="enroll">
           <div>
               <mt-field label="用户名：" placeholder="请输入账号" v-model="username"></mt-field>
               <mt-field label="密码：" placeholder="请输入密码" type="password" v-model="password"></mt-field>
               <mt-field label="确认密码：" placeholder="再次确认密码" type="password" v-model="password2"></mt-field>
               <mt-field label="手机号码：" placeholder="请输入手机号码" type="phone" v-model="phone"><mt-button size="small" @click.native="sendmsg" v-model="data">发送</mt-button></mt-field>
               <mt-field label="验证码：" placeholder="请输入验证码" type="code" v-model="code"></mt-field>
           </div>
            <div class="zhuce">
                <mt-button size="large" type="primary" @click="register">注册</mt-button>
            </div>
            <div class="xieyi">注册即表示同意<a class="fuwu">《服务协议》</a>和<a class="yinsi">《隐私协议》</a>
            </div>
        </div> 		
    </div>
</template>
<script>
import BackHeader from "../../components/Header/BackHeader.vue";
import { Button } from "mint-ui";
import { MessageBox } from "mint-ui";
import MemberCenterProvider from "@/providers/MemberCenterProvider";
export default {
  name: "userCreate",
  data() {
    return {
      Header: "个人注册",
      username: "",
      password: "",
      password2: "",
      phone:"",
      code:"",
      data:"",
      code1:""
    };
  },
  components: {
    BackHeader
  },
  methods: {
    sendmsg(){
    var mobile = this.phone;
    var token = 'b012e604c5ae5348facb1adeee22b6af ';
    var msg = '【API无忧】您的验证码为1234';
    var country_code = '86';   
    let data = {
            'mobile':mobile,
	          'msg':msg,
		        'country_code':country_code,
		        'token':token
          };

          MemberCenterProvider.sendmsgnodejs(data).then(res => {
            this.code1=res.data
            console.log(this.code1);//验证码
          });
    }
    ,
    register() {
       console.log(this.code1);
       console.log(this.code);
      if (!this.username || !this.password || !this.password2 ) {
        MessageBox("提示", "请输入账号密码！");
      }else if (!this.phone) {
        MessageBox("提示", "请输入手机号码！");
      }else if (!this.code) {
        MessageBox("提示", "请输入验证码！");
      }
      else if (this.code!= this.code1) {
        MessageBox( "提示","验证码不正确！");
      }
       else if (this.password !== this.password2) {
        MessageBox("提示","两次密码不相同");
      } 
      else {
        MessageBox.alert("注册成功！").then(action => {
          let data = {
            user: {
              userName: this.username,
              password: this.password,
              phone: this.phone,
            }
          };

          MemberCenterProvider.register(data).then(res => {
            console.log(res.data);
          });
          this.$router.push("/userEnroll");
        });
      }
    }
  }
};
</script>

<style >
.travel1 {
  margin-top: 20%;
  height: 87px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.travel1 > img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.enroll {
  display: flex;
  margin-top: 50px;
  align-items: center;
  flex-direction: column;
}


.xieyi {
  margin-top: 10px;
}

.zhuce{
     width: 180px;
     height: 50px;
     display: flex;
     margin-top: 30px;
    align-items: center;
    flex-direction: column;
 }
</style>
